<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>TOEFL iBT™ 考试 口语模拟系统</title>
    <!--Import Google Icon Font-->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!--Import materialize.css-->
    <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection" />
    
    <script type="text/javascript" src="js/materialize.min.js"></script>
</head>
<style>
    body {
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        align-content: center;
        justify-items: center;
        justify-content: center;
        background-color: #f7f7f7;
    }

    .head {
        background: -webkit-linear-gradient(left, #3f49a3, #832a41);
        display: flex;
        flex-direction: row;
        width: 100%;
        height: 12vh;
        align-items: center;
        align-content: center;
        justify-items: center;
        justify-content: center;
    }

    .tittle {
        color: white;
        font-size: 24px;
    }

    .midlayout {
        top: 2vh;
        display: flex;
        flex-direction: column;
        position: relative;
        height: 100vh;
        width: 80vw;
        border: 1px solid #dddddd;
        align-items: center;
    }

    .question {
        display: flex;
        width: 100%;
        height: 16vh;
        border: 1px solid #dddddd;
        text-align: center;
        padding: 12px;
        font-size: 16px;
        flex-direction: row;
        align-items: center;
        align-content: center;
        justify-items: center;
        justify-content: center;
    }

    .question-content {
        width: 50%;
    }

    .statetable {
        margin-top: 2vh;
        width: 25vw;
        border: 1px solid #dddddd;

    }

    .tabletext {
        text-align: center;

    }

    .thead {
        background-color: #6b6b6b;
    }

    .buttonarea {
        display: flex;
        flex-direction: row;
        margin-top: 2vh;
    }
</style>

<body>
    <div class="head">
        <div class="tittle">Question 1 of 5</div>
    </div>
    <div class="midlayout">
        <div class="question">
            <p class="question-content">
                Do you agree or disagree with the statement?
                Students should always wear uniforms in school.
            </p>
        </div>
        <audio src="" autoplay id="player">
            您的浏览器不支持 audio 标签。
        </audio>
        <table border="1" class="statetable" frame="box">
            <tr>
                <th class="tabletext thead">PREPARE</th>
            </tr>
            <tr>
                <td class="tabletext" id="timer">00:15</td>
            </tr>
        </table>
        <div class="buttonarea">
            <button class="waves-effect waves-light btn  indigo accent-2" onclick="start()" id="record"><i
                    class="material-icons left">cloud</i>Record</button>
            <button class="waves-effect waves-light btn" onclick="playRecording()" disabled id="play"><i class="material-icons left" >cloud</i>Play</button>
            <button class="waves-effect waves-light btn" onclick="saveRecording()" href="" id="download" disabled><i class="material-icons left">cloud</i>DownLoad</button>
        </div>
        <div id="audio-container"></div>
    </div>
    <script type="text/javascript" src="js/HZRecorder.js"></script>
    <script>
        var time;
        var audio = document.querySelector('audio');
        var record =document.getElementById('record');
        var play_btn = document.getElementById("play");
        var download = document.getElementById("download");

        function startRecording() {
            var audio = document.querySelectorAll('audio');
                    for(var i = 0; i < audio.length; i++){
                        if(!audio[i].paused){
                            audio[i].pause();
                        }
                    }
                    recorder.start();
                    
        }

        function stopRecording() {
            recorder.stop();
            recorder.getBlob(function(blob){
                let src = URL.createObjectURL(blob);
                var download = document.getElementById("download");
                var player = document.getElementById("player");
                player.src = src;
                download.href= src;
                download.download = "123.mp3" 
            });
        }
        function saveRecording() {
            recorder.save(audio);
        }
        function playRecording() {
            player = document.getElementById("player");
            player.play();
        }
        function play(src){
            player = document.getElementById("player");
            player.src = src;
            player.play();
        }
        function countdown1(){
            var timer = document.getElementById("timer");
            time -= 1;
            var timetext = time;
            if(timetext <10){
                timetext = "0"+time
            }
            timer.textContent = "00:"+timetext;
            if(time <= 0){
                play('music/speaking_beep_answer.mp3');
                time = 45;  //回答时间
                timer.textContent="00:"+time;
                    setTimeout(() => {
                        speak();
                    }, 4000);
                return;
            }
            else{
                setTimeout("countdown1()", 1000);
            }
            
        }
        function countdown2(){
            var timer = document.getElementById("timer");
            time -= 1;
            var timetext = time;
            if(timetext <10){
                timetext = "0"+time
            }
            timer.textContent = "00:"+timetext;
            if(time <= 0){
                stopRecording();
                play_btn.disabled =false;
                download.disabled = false;
            }
            else{
                setTimeout("countdown2()", 1000);
            }
        }
        function speak(){
            startRecording();
            countdown2();

        }
        function start() {
            time =15; //准备时间
            play('music/speaking_beep_prepare.mp3');
            record.disabled = true;
            setTimeout(() => {
                countdown1();
            }, 6000);
        ;
            
        }
        var recorder;
        window.onload = function(){
                recorder = new Recorder({
                    sampleRate: 44100, //采样频率，默认为44100Hz(标准MP3采样率)
                    bitRate: 128, //比特率，默认为128kbps(标准MP3质量)
                    success: function(){ //成功回调函数
                        play_btn.disabled = true;
                        record.disabled = false;
                        download.disabled =true;
                    },
                    error: function(msg){ //失败回调函数
                        alert(msg);
                    },
                    fix: function(msg){ //不支持H5录音回调函数
                        alert(msg);
                    }
                });
            }
    </script>


</html>